<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onunload="alert('The onunload event was triggered')">
    <button onclick="handleUnload()">卸载页面</button>
    <input type="text" />
  </body>
  <script>
    function handleUnload() {
      // location.href = './1. load 事件.html';
      location.href = './03.html';

    }
    window.addEventListener("unload", (event) => {
      console.log("Unloaded!");
    });
    window.addEventListener('beforeunload', (event) => {
      event.preventDefault();
      event.returnValue = '';
    });
    /* 
    unload 事件处理程序也有两种指定方式。
        1.第一种是 JavaScript 方式，
        window.addEventListener("unload", (event) => { 
        console.log("Unloaded!"); 
        });
        2.第二种方式与 load 事件类似，就是给<body>元素添加 onunload 属性：
        <body onunload="console.log('Unloaded!')"></body>
        这个事件生成的 event 对象在 DOM 合规的浏览器中只有 target 属性（值为 document）。
        根据 DOM2 Events，unload 事件应该在<body>而非 window 上触发。可是为了向后兼容，所有浏览器都在 window 上实现了 unload 事件。
    */
  </script>
</html>
